<template>
	<view class="fund">
		<custom-navi :show-home="false">资金管理<view class="putin" @click="billBtn">账单</view></custom-navi>
		<view class="fund-head">
			<view class="fund-head-title">
				可提现收入(元)
			</view>
			<view class="fund-head-money">
				168,888.00
			</view>
			<view class="fund-head-upbtn" @tap="withdrawBtn">
				立即提现
			</view>
			<view class="fund-head-more">
				<view class="more">
					<view class="more-value">168,888.00</view>
					<view class="more-title">累计收入(元)</view>
				</view>
				<view class="more">
					<view class="more-value">168,888.00</view>
					<view class="more-title">余额(元)</view>
				</view>
			</view>
		</view>
		<view class="fund-rests">
			<view class="fund-rests-list" v-for="(item,index) in restslist" :key='index'>
				<view class="icon">
					<image :src="item.icon" mode=""></image>
				</view>
				<view class="title" @tap="alterBtn(item)">{{item.title}}</view>
				<view class="arrows" @tap="alterBtn(item)">
					<image src="/static/little-more.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				restslist:[
					{title:'银行卡管理',icon:'/static/myicon/yhk.png',url:'pages/bank/index'},
					{title:'提现密码修改',icon:'/static/myicon/txbm.png',url:'pages/alterPws/index'},
				]
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		methods:{
			billBtn(){ // 账单
				uni.navigateTo({
					url:'pages/bill/index'
				})
			},
			alterBtn(item){ // 提现密码修改 || 銀行卡
				uni.navigateTo({
					url:item.url
				})
				
			},
			withdrawBtn(){ // 立即提现
				uni.navigateTo({
					url:'pages/withdraw/index'
				})
			},
		}
	}
</script>

<style lang="scss">
	.fund{
		.putin {
			// height: 23rpx;
			line-height: 44rpx;
			position: absolute;
			top: 0;
			right: 32rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			opacity: 1;
		
		}
		&-head{
			width:100%;
			height:432rpx;
			background:rgba(12,212,211,1);
			// filter:blur(10rpx);
			opacity:1;
			text-align: center;
			padding: 40rpx 0;
			// padding-bottom: 22rpx;
			view{
				margin-bottom: 20rpx;
			}
			&-title{
				font-size:28rpx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(255,255,255,1);
				opacity:1;
			}
			&-money{
				font-size:64rpx;
				font-family:PingFang SC;
				font-weight:bold;
				color:rgba(255,255,255,1);
				opacity:1;
			}
			&-upbtn{
				width:360rpx;
				height:80rpx;
				margin: 0 auto;
				background:rgba(255,255,255,1);
				box-shadow:0rpx 6rpx 12rpx rgba(0,143,142,0.4);
				opacity:1;
				border-radius:44rpx;
				font-size:34rpx;
				font-family:PingFang SC;
				font-weight:bold;
				line-height:80rpx;
				color:rgba(12,212,211,1);
				opacity:1;
			}
			&-more{
				display: flex;
				
				.more{
					flex: 1;
					&-value{
						font-size:40rpx;
						font-family:PingFang SC;
						font-weight:400;
						color:rgba(255,255,255,1);
						opacity:1;
					}
					&-title{
						font-size:24rpx;
						font-family:PingFang SC;
						font-weight:400;
						color:rgba(255,255,255,1);
						opacity:1;
					}
				}
			}
		}
		&-rests{
			&-list{
				padding: 28rpx 54rpx;
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid rgba(229, 234, 238, 1);
				.icon{
					width:64rpx;
					height:60rpx;
					
					opacity:0.48;
					image{
						width: 100%;
						height: 100%;
					}
					margin-right: 64rpx;
				}
				.title{
					font-size:32rpx;
					font-family:Source Han Sans CN;
					font-weight:400;
					color:rgba(63,63,63,1);
					opacity:1;
				}
				.arrows{
					margin-left: auto;
					width: 50rpx;
					height: 32rpx;
					text-align: right;
					opacity:1;
					image{
						width:23rpx;
						height:32rpx;
					}
				}
			}
		}
	}
</style>
